import React from 'react'
import axios from 'axios'
import { Table, Button, Modal, Form, Input, message } from "antd";
import './orderlist.css'
import { observer, inject } from "mobx-react";
const { confirm } = Modal;
const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 16 }
}

@inject('wz')
@observer
class OrderList extends React.Component {
    constructor() {
        super()
        this.state = {
            data: null,
            searchText: ''
        }
    }
    async componentDidMount() {
        await this.props.wz.wzGetData()
        let { wzdata } = this.props.wz;
        await this.setState({
            data: wzdata,
        });
        console.log(this.state.data);

    }
    dataUpdate = (value) => {
        axios.defaults.baseURL='/api'
        axios({
            method: 'post',
            url: '/wzAll'
        }).then(res => {
            this.setState({
                data: res.data
            })
        })
    }
    dataDelete = (key) => {
        // console.log(key);
        axios.defaults.baseURL='/api'
        axios({
            method: 'post',
            url: '/wzDel',
            data: key
        }).then(res => {
            // console.log(res.data);
            this.setState({
                data: res.data
            })
        })
    }
    searchTextChange = (e) => {
        this.setState({
            searchText: e.target.value
        })
    }
    searchBtn = () => {
        // console.log(this.state.searchText);
        let obj = { name: this.state.searchText }
        if (this.state.searchText !== '') {
            axios.defaults.baseURL='/api'
            axios({
                method: 'post',
                url: '/wzSearch',
                data: obj
            }).then(res => {
                this.setState({
                    data: res.data,
                    searchText: ''
                })
            })
        } else {
            confirm({
                title: '提示',
                content: '请输入收货人姓名',
                onOk() { },
            });
        }
    }
    restart = () => {
        axios.defaults.baseURL='/api'
        axios({
            method: 'post',
            url: '/wzAll'
        }).then(res => {
            this.setState({
                data: res.data
            })
        })
    }
    render() {
        let columns = [
            {
                title: "收货人姓名",
                dataIndex: "name",
                align: 'center'
            },
            {
                title: "订单金额",
                dataIndex: "money",
                align: 'center'
            },
            {
                title: "收获地址",
                dataIndex: "address",
                align: 'center'
            },
            {
                title: '操作',
                align: 'center',
                render: (text, record) => (
                    <App zzDelete={this.dataDelete} upDate={this.dataUpdate} data={record.key} rowData={record} />
                )
            }
        ];
        return (
            <div>
                <Table
                    pagination={{ pageSize: 5, position: ['bottomCenter'] }}
                    columns={columns}
                    dataSource={this.state.data}
                    bordered
                    title={() =>
                        <div style={{ display: 'flex', width: '260px' }}>
                            <Input placeholder='输入收货人姓名' onChange={this.searchTextChange} value={this.state.searchText} />
                            <Button onClick={this.searchBtn}>搜索</Button>
                            <Button onClick={this.restart}>重置</Button>
                        </div>
                    }
                // footer={() => "Footer"}
                />
            </div>
        );
    }
}
export default OrderList

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            visible: false,
            isdisabled: false,
            key: '',
            nameText: '',
            moneyText: '',
            addressText: ''
        }
    }

    handleOk = () => {
        let obj = {
            key: this.state.key,
            name: this.state.nameText,
            money: this.state.moneyText,
            address: this.state.addressText
        }
        axios.defaults.baseURL='/api'
        axios({
            url: '/wzEdit',
            method: 'post',
            data: obj
        }).then(res => {
            this.props.upDate()
        })
        this.setState({
            visible: false,
        });

    };

    handleCancel = e => {
        this.setState({
            visible: false,
        });
    };
    wzSee = (obj) => {
        this.setState({
            visible: true,
            isdisabled: true,
            nameText: obj.name,
            moneyText: obj.money,
            addressText: obj.address
        });

    }
    edit = (obj) => {
        // console.log(obj);
        this.setState({
            visible: true,
            isdisabled: false,
            key: obj.key,
            nameText: obj.name,
            moneyText: obj.money,
            addressText: obj.address
        })
    }
    delete = (obj) => {
        let keyObj = { key: obj.key }
        let that = this
        // console.log(keyObj);
        confirm({
            title: '删除',
            content: '一旦删除不可恢复，请确定是否要删除',
            onOk() {
                message.info('删除成功')
                that.props.zzDelete(keyObj)
            },
        });
    }

    nameChange = (e) => {
        let name = e.target.value
        this.setState({
            nameText: name
        })
    }
    moneyChange = (e) => {
        let money = e.target.value
        this.setState({
            moneyText: money
        })
    }
    addressChange = (e) => {
        let address = e.target.value
        this.setState({
            addressText: address
        })
    }
    render() {
        // console.log(this.props);
        // console.log(this.props.data);
        return (
            <div className='wzbox'>
                <Button onClick={this.wzSee.bind(this, this.props.rowData)} size="small" type="primary">查看</Button>
                <Button onClick={this.edit.bind(this, this.props.rowData)} size="small">修改</Button>
                <Button onClick={this.delete.bind(this, this.props.rowData)} size="small" type="primary" danger>删除</Button>
                <Modal
                    title="修改订单信息"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                >
                    <Form {...layout}>
                        <Form.Item label='收货人姓名'>
                            <Input onChange={this.nameChange} disabled={this.state.isdisabled} value={this.state.nameText} />
                        </Form.Item>
                        <Form.Item label='订单金额'>
                            <Input onChange={this.moneyChange} disabled={this.state.isdisabled} value={this.state.moneyText} />
                        </Form.Item>
                        <Form.Item label='收货地址'>
                            <Input onChange={this.addressChange} disabled={this.state.isdisabled} value={this.state.addressText} />
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        );
    }
}







